<template>
  <div>
    <div class="navBar">
      <van-nav-bar
        title="我的消息"
        right-text="全部已读"
        @click-left="onClickLeft"
      >
        <template #left>
          <van-icon name="arrow-left" />
        </template>
      </van-nav-bar>
    </div>
    <div class="cellBox">
      <van-cell title="您提交的反馈我们已经收到" is-link>
        <!-- 使用 right-icon 插槽来自定义标题 -->
        <template #right-icon>
          <div class="icon"></div>
          <van-icon name="arrow" />
        </template>
      </van-cell>
      <van-cell title="您提交的反馈我们已经收到" is-link>
        <!-- 使用 right-icon 插槽来自定义标题 -->
        <template #right-icon>
          <div class="icon"></div>
          <van-icon name="arrow" />
        </template>
      </van-cell>
      <van-cell title="您提交的反馈我们已经收到" is-link>
        <!-- 使用 right-icon 插槽来自定义标题 -->
        <template #right-icon>
          <div class="icon"></div>
          <van-icon name="arrow" />
        </template>
      </van-cell>
      <van-cell title="您提交的反馈我们已经收到" is-link>
        <!-- 使用 right-icon 插槽来自定义标题 -->
        <template #right-icon>
          <div class="icon"></div>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myMessage',
  data () {
    return {
      border: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/personal')
    }
  }

}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar__text {
  color: #000;
}
.navBar {
  padding-bottom: 10px;
}
.cellBox {
  margin: 0 10px;
  border-bottom: 1px solid #f7f8f9;
}
.icon {
  height: 10px;
  width: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 8px;
}
::v-deep .van-cell {
  display: flex;
  align-items: center;
  line-height: 40px;
}
</style>
